<template>
  <div class="categories">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- <h1>商品分类页面</h1> -->
      <div class="card">
        <!-- 头部内容 -->
        <div class="top">
          <el-button type="primary" @click="addModel" class="car_button"
            >添加分类</el-button
          >
        </div>
        <zk-table
          :columns="columns"
          show-row-hover
          :data="tableData"
          show-header
          show-index
          index-text
          :selection-type="false"
          :expand-type="false"
          stripe
          border
        >
          <template slot="ok" slot-scope="scope">
            <!-- {{ scope.row.cat_deleted}} -->
            <i
              class="el-icon-success"
              style="color: lightgreen"
              v-if="!scope.row.cat_deleted"
            ></i>
            <i class="el-icon-danger" style="color: red" v-else></i>
          </template>
          <template slot="level" slot-scope="scope">
            <el-tag
              :type="
                scope.row.cat_level == 0
                  ? 'primary'
                  : scope.row.cat_level == 1
                  ? 'success'
                  : scope.row.cat_level == 2
                  ? 'danger'
                  : 'warning'
              "
              >{{
                scope.row.cat_level == 0
                  ? "一级"
                  : scope.row.cat_level == 1
                  ? "二级"
                  : scope.row.cat_level == 2
                  ? "三级"
                  : "四级"
              }}</el-tag
            >
          </template>
          <template slot="opa" slot-scope="scope">
            <el-button @click="editFn(scope.row)" type="primary" size="mini"
              ><i class="el-icon-edit">编辑</i></el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="Delete(scope.row.cat_id)"
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </template>
        </zk-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageinfo.pagenum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageinfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- 模态框部分  -->
        <el-dialog
          :title="editID ? '编辑分类' : '添加分类'"
          :visible.sync="dialogVisible"
          width="50%"
        >
          <!-- <span>这是一段信息</span> -->
          <!-- Form表单部分 -->
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="ruleForm.cat_name"></el-input>
            </el-form-item>

            <el-form-item label="父级分类" v-if="editID ? false : true">
              <!-- 级联选择器 -->
              <!-- v-model就是级联选择器的值 -->
              <!-- props 配置信息 -->
              <!-- options要渲染的数据的列表 -->
              <el-cascader
                v-model="value"
                :options="tableDatalist"
                :props="{
                  expandTrigger: 'hover',
                  value: 'cat_id',
                  label: 'cat_name',
                }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  getCategories,
  remDelete,
  addCategories,
  editCategories,
} from "../utils/http";
export default {
  data() {
    return {
      pageinfo: {
        type: 3,
        pagenum: 1,
        pagesize: 10,
      },
      dialogVisible: false, //模态框为默认
      tableData: [],
      total: 0, //总条数
      value: "", //保存父级id
      tableDatalist:[],   //保存二级联动
      ruleForm: {
        cat_pid: "",
        cat_name: "",
        cat_level: "",
      },
      rules: {
        cat_name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
        cat_level: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
      list: [], //保存参数
      editID: "",
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          prop: "cat_deleted",
          template: "ok",
          type: "template",
        },
        {
          label: "排序",
          prop: "cat_level",
          template: "level",
          type: "template",
        },
        {
          label: "操作",
          template: "opa",
          type: "template",
        },
      ], //表格的配置项
    };
  },
  created() {
    this.pleaCategories();
  },
  methods: {
    pleaCategories() {
      getCategories(this.pageinfo).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.tableData = res.data.result;
      });
    },
    //级联
    handleChange(val) {
      // console.log(val);
      this.list = val;
      // this.ruleForm.cat_pid = val[val.length - 1];
      // this.ruleForm.cat_level = val.length - 1;
      // console.log(this.ruleForm.cat_level);
    },
    //分页
    handleSizeChange(val) {
      this.pageinfo.pagesize = val;
      this.pleaCategories();
    },
    handleCurrentChange(val) {
      this.pageinfo.pagenum = val;
      this.pleaCategories();
    },
    //添加分类
    addModel() {
      getCategories({
        type: 2,
        pagenum: 1,
        pagesize: 10,
      }).then((res) => {
        console.log(res);
        this.tableDatalist = res.data.result;
      });
      this.dialogVisible = true;
      this.ruleForm = {};
      this.editID = "";
      this.value = "";
    },
    //编辑
    editFn(row) {
      this.dialogVisible = true;
      this.editID = row.cat_id;
      this.ruleForm = row;
    },
    //删除
    Delete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remDelete({ id: row }).then((res) => {
            // console.log(res);
            this.pleaCategories();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //确定添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          if (this.editID) {
            //编辑
            editCategories({ id: this.editID, ...this.ruleForm }).then(
              (res) => {
                // console.log(res);
                if (res.meta.status == 200) {
                  this.pleaCategories();
                  this.dialogVisible = false;
                  this.$message({
                    type: "success",
                    message: res.meta.msg,
                  });
                } else {
                  this.$message({
                    type: "danger",
                    message: res.meta.msg,
                  });
                }
              }
            );
          } else {
            //添加
            if (this.list.length == 0) {
              this.ruleForm.cat_pid = 0;
              this.ruleForm.cat_level = 0;
            } else if (this.list.length == 1) {
              this.ruleForm.cat_pid = this.list[0];
              this.ruleForm.cat_level = 1;
            } else {
              this.ruleForm.cat_pid = this.list[1];
              this.ruleForm.cat_level = 2;
            }
            addCategories(this.ruleForm).then((res) => {
              console.log(res);
              if (res.meta.status == 201) {
                this.pleaCategories();
                this.dialogVisible = false;
                this.$message({
                  type: "success",
                  message: res.meta.msg,
                });
              } else {
                this.$message({
                  type: "danger",
                  message: res.meta.msg,
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-breadcrumb {
  margin-bottom: 20px;
}
.car_button {
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
}
.el-cascader {
  width: 100%;
}
::v-deep .el-form-item {
  margin-top: 30px;
  margin-bottom: 0;
}
::v-deep .el-dialog__body {
  padding-top: 0;
}
::v-deep .el-dialog__header {
  padding-bottom: 0;
}
::v-deep .el-form-item__content {
  text-align: right;
}
</style>